<script lang="ts" setup>
import {ref, watch} from "vue";
import {useTopicReadStore} from "../../store/TopicReadStore.ts";
import type {TopicDetailData} from "../../network/types/TopicDetail.ts";
import ReplyTable from "./ReplyTable.vue";

const props = defineProps({
  modelValue: {type: Boolean},
  pid: {type: Number},
})
const topicReadStore = useTopicReadStore()
const show = ref(props.modelValue || false)
const data = ref<TopicDetailData>()
const loading = ref(false)

const emit = defineEmits(['update:modelValue'])
const request = (pid: number) => {
  loading.value = true
  topicReadStore.readReply(pid, true).then(res => {
    loading.value = false
    data.value = res
  }).catch(r => {
    console.error(r)
    loading.value = false
  })
}

watch(show, (s) => {
  emit('update:modelValue', s)
  if (s && props.pid) request(props.pid)
})

watch(props, (s) => {
  show.value = s.modelValue
})
</script>

<template>
  <el-dialog v-if="props.pid" v-model="show" append-to-body class="bg-color" title="单回复" width="80%">
    <div v-loading="loading" style="min-height: 100px">
      <reply-table v-if="data" ref="replyTable" :levels="data.levels"
                   :replies="data.replies"
                   :topic="data.topic"
                   :user-map="data.userMap"
      />
    </div>
  </el-dialog>
</template>

<style scoped>

</style>